import { createHighlighter } from "shiki";
import { createHighlighterCore } from "shiki/core";
import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
import langHTML from "shiki/langs/angular-html.mjs";
import langCSS from "shiki/langs/css.mjs";
import langJS from "shiki/langs/javascript.mjs";
import lightPlus from "shiki/themes/light-plus.mjs";

const jsEngine = createJavaScriptRegexEngine();

/**
 * @param {string} code
 * @returns {Promise<string>}
 */
export async function useShiki(code) {
  const hl = await loadHighlighter();
  const html = hl.codeToHtml(code, {
    lang: "html",
    theme: "light-plus",
  });
  return html;
}

/**
 * @returns {Promise<import("shiki").HighlighterCore>}
 */
async function loadHighlighter() {
  const highlighter = await createHighlighterCore({
    langs: [langHTML, langCSS, langJS],
    engine: jsEngine,
    themes: [lightPlus],
  });
  return highlighter;
}
